<template>
  <view class="make_present">
    <view class="make_title">
      <text>可划转金额（元）</text>
      <text class="price">{{ totalAmount }}</text>
      <view class="but">
        <i-buttons
          @click="toDetail"
          radius="48rpx"
          padding="12rpx 36rpx"
          bgColor="transparent"
          color="#fff"
          >划转记录</i-buttons
        >
      </view>
    </view>
    <i-card top="20rpx">
      <i-formItem border="none" align="top" title="划转类型" :lBlod="true">
        <view
          @click="showDrawer = true"
          class="exchangeType"
          :style="{ color: formData.exchangeTypeStr ? '#222' : '#999' }"
          >{{ formData.exchangeTypeStr || "请选择划转类型" }}
          <uni-icons type="down" size="24" color="#999"></uni-icons>
        </view>
      </i-formItem>
      <i-formItem border="none" align="top" title="划转金额" :lBlod="true">
        <view style="display: flex; align-items: center">
        <text style="margin-right: 8rpx">￥</text>
        <input
          v-model="formData.giveAccountAmount"
          type="number"
          placeholder="请输入划转金额"
        />
      </view>
      </i-formItem>
      <!-- <view class="explain_text"> 划转手续费 5% </view> -->

      <view class="bottoms">
        <i-buttons
          color="#fff"
          bgColor="linear-gradient( 90deg, #FFB413 0%, #FF9A00 100%)"
          radius="48rpx"
          padding="18rpx 0"
          size="32rpx"
          @click="confrim"
        >
          确认划转</i-buttons
        >
      </view>
    </i-card>
  </view>
  <i-drawer
    v-model="showDrawer"
    @confirm="drawerConfirm"
    :list="bussinessPriceType"
    :confirm_title="false"
    :activeIndex="activeIndex"
  >
  </i-drawer>
  <i-checkPay-modal
    :chcekPay="checkPay"
    @close="checkPay = false"
    @checkConfirm="checkConfirm"
  ></i-checkPay-modal>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { createTransferOrder, createExchangeOrder } from "../../api/index";
import { phoneReg } from "../../utils/regs";
import {
  showTost,
  bussinessPriceType as initBussinessPriceType,
  exchangeTypeEnum,
} from "../../utils/common";
import useStore from "../../stores/index";

const store = useStore();
const totalAmount = ref("");
const activeIndex = ref(0);
const showDrawer = ref(false);
const checkPay = ref(false);

const userInfo = computed(() => {
  // totalAmount.valu e = store.userInfo[exchangeTypeEnum[formData.exchangeType]];
  return store.userInfo;
});

const bussinessPriceType = initBussinessPriceType?.filter(i=> i.value !== 1)

const formData = reactive<{
  giveAccountAmount: string;
  mobile: string;
  exchangeType: any;
  exchangeTypeStr: string;
}>({
  giveAccountAmount: "",
  mobile: "",
  exchangeType: "",
  exchangeTypeStr: "",
});

const drawerConfirm = async (index: number) => {
  // activeIndex.value = index;
  formData.exchangeType = bussinessPriceType[index].value;
  formData.exchangeTypeStr = bussinessPriceType[index].label;
  showDrawer.value = false;
  totalAmount.value = userInfo.value[exchangeTypeEnum[formData.exchangeType]];
};
const checkConfirm = async (pwd: string) => {
  checkPay.value = false;
  uni.showLoading({
    title: "划转中...",
    mask: true,
  });
  await createExchangeOrder({
    exchangeAmount: formData.giveAccountAmount,
    exchangeType: formData.exchangeType,
  });
  uni.hideLoading();
  showTost("划转成功", () => {
    uni.navigateBack()
  });
  store.setUserInfo();
};
const confrim = async () => {
  if (!formData.giveAccountAmount) {
    showTost("请输入划转金额");
    return;
  }

  if (!Number.isInteger(Number(formData.giveAccountAmount))) {
    showTost("划转金额必须为整数");
    return;
  }
  if (Number(formData.giveAccountAmount) > Number(totalAmount.value)) {
    showTost("划转金额不能大于可划转金额");
    return;
  }
  // if (!formData.smsCode) {
  //   showTost("请输入验证码");
  //   return;
  // }

  // if (!formData.mobile) {
  //   showTost(activeIndex.value === 0 ? "请输入划转账号" : "请输入划转人ID");
  //   return;
  // }

  // uni.showLoading({
  //   title: "加载中...",
  //   mask: true,
  // });

  uni.showModal({
    title: "划转",
    content: "划转后不可撤销，请确认是否划转",
    showCancel: true,
    confirmText: "确认划转",
    success: (e) => {
      if (e.confirm) {
        checkPay.value = true;
      }
    },
  });
};

const toDetail = () => {
  uni.navigateTo({
    url: "/pages/views/transferPrice_log",
  });
};

onLoad((options) => {
  if (options?.selectType) {
    formData.exchangeType = options.selectType;
    const index = bussinessPriceType.findIndex(
      (item) => item.value == options.selectType
    );
    formData.exchangeTypeStr = bussinessPriceType[index].label;
    activeIndex.value = index;
    totalAmount.value = userInfo.value[exchangeTypeEnum[options.selectType]];
  } else {
    formData.exchangeType = bussinessPriceType[0].value;
    formData.exchangeTypeStr = bussinessPriceType[0].label;
    totalAmount.value = userInfo.value[exchangeTypeEnum[formData.exchangeType]];
  }
});
</script>

<style lang="scss" scoped>
.make_present {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: url("../../static/images/zz_bg.png") no-repeat center;
  background-position: 100% 360rpx;
  background-position: top;
  background-color: #f5f5f5;
  .exchangeType {
    padding: 12rpx 0;
    @include flexRS;
  }

  .make_title {
    width: calc(100% - 48rpx);
    margin: 60rpx auto;
    @include flexC;
    position: relative;
    text {
      margin-left: 16rpx;
      font-weight: 400;
      color: #fff;
    }

    .price {
      @include dprice(32px);
      color: #fff;
      margin-top: 16rpx;
    }
    .but {
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  .explain_text {
    @include dfont(26rpx);
    color: #a0a0ad;
    margin-top: 20rpx;
  }

  .bottoms {
    margin-top: 40rpx;
    padding: 0 12rpx;
  }
}

input {
  font-size: 32rpx;
  padding: 12rpx 0;
  display: inline-block;
}
</style>
